<script setup lang="ts">
// import { h, ref } from 'vue';
import type { DataTableColumns } from 'naive-ui';
import { findAll } from '@/service/api/system';
import UseTable from '@/components/table/use-table.vue';
import type { FormItemProps, FormProps } from '@/components/form/props';

const formItems: FormItemProps[] = [
  {
    label: '用户名',
    path: 'username',
    component: 'input',
    componentProps: {
      placeholder: '请输入用户名'
    },
    grid: {
      span: 6
    }
  },
  {
    label: '操作',
    path: 'title',
    component: 'input',
    componentProps: {
      placeholder: '请输入操作'
    },
    grid: {
      span: 6
    }
  }
];
const formConfig: FormProps = {
  formItems,
  labelPlacement: 'left',
  modelValue: {
    name: ''
  },
  rules: {},
  size: 'medium',
  labelWidth: 80,
  inline: true,
  formGrid: {
    span: 12
  }
};

const getColumn: DataTableColumns<{ id: string | number; name: string }> = [
  {
    title: 'ID',
    key: 'id',
    width: 80
  },
  {
    title: '名称',
    key: 'title',
    width: 120
  },
  {
    title: '参数',
    key: 'params'
  },
  {
    title: '地址',
    key: 'url'
  },
  {
    title: '客户端',
    key: 'user_agent',
    width: 120,
    ellipsis: true
  },
  {
    title: '角色',
    key: 'username',
    width: 120
  }
];
</script>

<template>
  <UseTable
    ref="tableRef"
    :disabled-delete="true"
    :disabled-add="true"
    :get-table-data-api="findAll"
    :table-columns="getColumn"
    title="用户日志"
    :use-form="true"
    :form-config="formConfig"
  />
</template>

<style scoped></style>
